<template>
  <div class="home">
    <NavView></NavView>

    <div class="center container">
      <div class="center-left">
        <div class="content">
          <div class="box" v-for="item in form" :key="item.id">
            <div @click="sendText(item.id)">
              <img :src="item.titleImage" alt="" />
            </div>
            <div>
              <p
                style="font-size: 24px; font-weight: 500"
                @click="sendText(item.id)"
              >
                {{ item.title }}
              </p>
              <p style="color: rgba(0, 0, 0, 0.5); font-size: 16px">
                {{ item.description }}
              </p>
              <span class="tag">
                <p v-for="(item1, index) in item.tags" :key="index">
                  <!-- <span>{{ item1.name }}</span>
              <span>{{ item1.id }}</span> -->
                  <el-tag size="mini" @click="btn(item1.id, item1.name)">{{
                    item1.name
                  }}</el-tag>
                </p>
              </span>
            </div>
          </div>
          <div class="page">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="form.total"
              @current-change="handlepage"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <div class="center-right">
        <div class="admin">
          <AdminView></AdminView>
        </div>
        <div class="category">
          <CateGory></CateGory>
        </div>
        <div id="tag">
          <TagView></TagView>
        </div>
      </div>
    </div>

    <FooterView></FooterView>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        total: "",
        page: "1",
        list: "",
        id: "",
      },
    };
  },
  created() {
    // this.getAdmin();
    this.getList();
    // this.getCategoryList();
    // this.getTagList();
  },
  methods: {
    btn(a, b) {
      this.$router.push({
        path: "/CateTextView",
        query: {
          id: a,
          name: b,
        },
      });
    },
    sendText(textID) {
      this.$router.push({
        path: "/TextView",
        query: {
          id: textID,
        },
      });
    },
    handlepage(v) {
      //切换分页
      console.log(v, "v");
      this.form.page = v;
      this.getList();
    },
    getList() {
      this.$axios
        .post("http://47.104.167.34:9110/api/index/article/list", {
          current: this.form.page,
          size: 10,
        })
        .then((r) => {
          this.form = r.data.data;
          this.form.total = r.data.total;
          console.log(r, "ok-list-content", this.form);
        })
        .catch((r) => {
          console.log(r, "catch");
        });
    },
  },
};
</script>

<style scoped>
.center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.center-left {
  position: relative;
  width: 900px;
  height: 1800px;
  /* background-color: antiquewhite; */
  margin: 20px 10px 0 0;
  border-radius: 10px;
}
.center-right {
  width: 290px;
  /* height: 1000px; */
  /* background-color: antiquewhite; */
  margin-top: 20px;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
}
.admin {
  width: 290px;
  height: 220px;
}
.page {
  margin: 0 auto;
}
.box {
  width: 430px;
  height: 340px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  border-radius: 10px;
  margin-right: 20px;
  margin-bottom: 20px;
  overflow: hidden;
}
.box > div:nth-child(1) {
  width: 100%;
  height: 60%;
}
.box > div:nth-child(1) img {
  width: 100%;
  height: 100%;
}
.box > div:nth-child(2) {
  width: 100%;
  height: 40%;
  padding: 20px;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-direction: column;
}
.tag {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;
}
.tag p,
.tag p span {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}
.category {
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  margin-top: 20px;
  border-radius: 10px;
}
#tag {
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  margin-top: 20px;
  border-radius: 10px;
}
</style>
